<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/iron-label/iron-label.html">
<link rel="import" href="slide-show.html">
<link rel="import" href="left-menu.html">
<link rel="import" href="product-list.html">

<dom-module id="my-app">
    <template>
        <style>
            :host {
                --app-primary-color: #4285f4;
                --app-secondary-color: black;
                font-size: 12px;
                color: #555;
                display: block;
            }

            app-header {
                color: #fff;
                background-color: var(--app-primary-color);
            }

            app-header paper-icon-button {
                --paper-icon-button-ink-color: white;
            }

            .drawer-list {
                margin: 0 20px;
            }

            .drawer-list a {
                display: block;

                padding: 0 16px;

                text-decoration: none;

                color: var(--app-secondary-color);

                line-height: 40px;
            }

            .drawer-list a.iron-selected {
                color: black;

                font-weight: bold;
            }

            .content {
                min-width: 1020px;
                width: 1020px;
            }

            .flex-horizontal {
                @apply(--layout-horizontal);
            }

            .flex-center-justified {
                @apply(--layout-horizontal);
                @apply(--layout-center-justified);
            }

            .flex-vertical {
                @apply(--layout-vertical);
                min-height: 100vh;
            }

            .flexchild {
                @apply(--layout-flex);
            }

            .souc {
                height: 33px;
                line-height: 33px;
                margin: 0 auto;
                display: inline-block;
            }

            .menu_container {
                font-size: 20px;
                color: #ffffff;
                background: url(/images/menu_bg.jpg) top repeat-x;
                height: 44px;
            }

            iron-pages div {
                width: 100%;
                min-height: 500px;
            }

            .footer {
                text-align: center;
                height: 33px;
                line-height: 33px;
                font-size: 14px;
                color: #ffffff;
            }

            .footer > a {
                text-decoration: none;
            }

            .footer > a:visited {
                color: #ffffff;
            }

            .footer > a:hover {
                color: #FFF600;
            }

            paper-tab {
                font-size: 20px;
            }

        </style>

        <app-location route="{{route}}"></app-location>
        <app-route
                route="{{route}}"
                pattern="/:page"
                data="{{routeData}}"
                tail="{{subroute}}"></app-route>

        <div class="container flex-vertical">

            <div class="container flex-center-justified" style="background-color: #F5F5F5;">
                <div class="content">
                    <div class="souc">您好！欢迎访问东莞浩博模具测试有限公司官方网站！本公司地址是：<a href="http://ditu.amap.com/place/B0FFGQTMRC"
                                                                         style="display: inline-block;text-decoration: none;color: #1e88e5"
                                                                         target="_blank">东莞市横沥镇田坑村园林路3号</a>
                        <a href="http://ditu.amap.com/place/B0FFGQTMRC" target="_blank"
                           style="text-decoration: none;color: #ea0c3e">点此查看地图</a>
                        本公司阿里巴巴网店：
                        <a href="http://haobomould.1688.com" target="_blank"
                           style="text-decoration: none;color: #1e88e5;font-size: 13px;">http://haobomould.1688.com</a>
                    </div>
                </div>
            </div>

            <div class="container flex-center-justified">
                <div class="content" style="height: 118px;">
                    <div class="flex-horizontal">
                        <img class="logo" src="/images/haobo_150_150.png" style="width: 100px;height: 100px;">
                        <img class="logo-text" src="/images/logo-text.png">
                        <div style="font-size: 24px;padding-top: 40px;width: 470px;">全方位<label
                                style="color: #EF6C00;font-size: 26px;font-weight:bold;">模具测试</label>专业解决商
                        </div>

                        <div style="width: auto;text-align: right;display: flex;padding-top: 40px;">
                            <div style="display: flex;padding-right: 10px;">
                                <img style="width: 40px;height: 40px;display: block" src="/images/phone.jpg">
                            </div>
                            <label style="width: 60px;padding-top: 10px;">服务热线：</label>
                            <div style="display: inline-block;padding-top: 4px;">
                                <div style="color: #EF6C00;font-size: 22px;font-weight:bold;width: 160px;">
                                    <iron-label>
                                        134-5000-0780
                                    </iron-label>
                                    <iron-label>
                                        134-5000-8070
                                    </iron-label>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="menu_container flex-center-justified">
                <div class="content" style="font-size: 20px;">
                    <div>
                        <paper-tabs selected="{{selected}}" onselect="selectedChanged">
                            <paper-tab>网站首页</paper-tab>
                            <paper-tab>关于浩博</paper-tab>
                            <paper-tab>产品展示</paper-tab>
                            <paper-tab>公司风采</paper-tab>
                            <paper-tab>资质认证</paper-tab>
                            <paper-tab>在线留言</paper-tab>
                            <paper-tab>联系我们</paper-tab>
                        </paper-tabs>
                    </div>
                </div>
            </div>

            <div id="slideShowDiv" style="height:450px;">
                <slide-show style=";width: 100%;min-width:1020px;"></slide-show>
            </div>

            <div class="container flex-center-justified">
                <div class="content" style="margin-top: 10px;">
                    <iron-pages selected="{{selected}}">
                        <div class="flex-horizontal">
                            <left-menu></left-menu>
                            <product-list></product-list>
                        </div>
                        <div style=" text-align: center;">
                            <iron-image src="/images/about.jpg" style="width:960px;height: 593px;"></iron-image>
                        </div>
                        <div class="flex-horizontal">
                            <left-menu></left-menu>
                            <product-list></product-list>
                        </div>
                        <div style=" text-align: center;">
                            <iron-image src="/images/ourteam.jpg" style="width:960px;height: 671px;"></iron-image>
                        </div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </iron-pages>
                </div>
            </div>

            <div class="flex-center-justified" style="background-color: #0199B0;margin-top: 10px;">
                <div class="content footer">
                    <a href="/index.html">网站首页</a>　—　
                    <a href="/index.html">关于浩博</a>　—　
                    <a href="/index.html">产品展示</a>　—　
                    <a href="/index.html">供求商机</a>　—　
                    <a href="/index.html">公司风采</a>　—
                    <a href="/index.html">资质认证</a>　—　
                    <a href="/index.html">人才招聘</a>　—　
                    <a href="/index.html">联系我们</a>
                </div>
            </div>
            <div style="height:33px; line-height:33px;text-align: center">
                东莞浩博模具测试有限公司 版权所有 Copyright 2016
            </div>
        </div>
        <!--<app-drawer-layout fullbleed>
          &lt;!&ndash; Drawer content &ndash;&gt;
          <app-drawer>
            <app-toolbar>Menu</app-toolbar>
            <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
              <a name="view1" href="/view1">View One</a>
              <a name="view2" href="/view2">View Two</a>
              <a name="view3" href="/view3">View Three</a>
            </iron-selector>
          </app-drawer>

          &lt;!&ndash; Main content &ndash;&gt;
          <app-header-layout has-scrolling-region>

            <app-header condenses reveals effects="waterfall">
              <app-toolbar>
                <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
                <div main-title>My App</div>
              </app-toolbar>
            </app-header>

            <iron-pages
                selected="[[page]]"
                attr-for-selected="name"
                fallback-selection="view404"
                role="main">
              <my-view1 name="view1"></my-view1>
              <my-view2 name="view2"></my-view2>
              <my-view3 name="view3"></my-view3>
              <my-view404 name="view404"></my-view404>
            </iron-pages>
          </app-header-layout>
        </app-drawer-layout>-->
    </template>

    <script>
        Polymer({
            is: 'my-app',

            properties: {
                /*page: {
                 type: String,
                 reflectToAttribute: true,
                 observer: '_pageChanged'
                 },*/
                selected: {
                    type: Number,
                    value: 0,
                    notify: true,
                    observer: "selectedChanged"
                }
            },

            observers: [
                '_routePageChanged(routeData.page)'
            ],

            _routePageChanged: function (page) {
                this.page = page || 'view1';
            },

            _pageChanged: function (page) {
                // Load page import on demand. Show 404 page if fails
                var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
                this.importHref(resolvedPageUrl, null, this._showPage404, true);
            },

            _showPage404: function () {
                this.page = 'view404';
            },

            selectedChanged: function (newValue, oldValue) {
                selected = newValue;
                if (selected == 0 || selected == 4 || selected == 5 || selected == 6) {
                    //only show in the first page
                    this.$["slideShowDiv"].hidden = false;
                } else {
                    this.$["slideShowDiv"].hidden = true;
                }
            }

        });
    </script>
</dom-module>
